<script setup>
import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';
import { getProductIcon } from '../../assets/theme.js';
import MenuBar from './MenuBar.vue';
import WindowControls from './WindowControls.vue';
import { getCurrentInstance } from 'vue';

const props = defineProps({
  showMainPane: { type: Boolean, default: true },
  showBottomPane: { type: Boolean, default: false },
  showAiPane: { type: Boolean, default: true },
});
const emit = defineEmits(['toggleMain', 'toggleBottom', 'toggleAi', 'openSettings', 'toggleMaximize', 'formatActive']);
const { t } = useI18n();

function onHeaderDblclick(e) {
  // ignore dblclicks originating on interactive elements
  const target = e.target;
  if (target && (target.closest('button') || target.closest('[data-tauri-drag-region="no-drag"]'))) return;
  emit('toggleMaximize');
}
</script>

<template>
  <header data-tauri-drag-region @dblclick="onHeaderDblclick" class="sticky top-0 z-20 h-10 flex items-center justify-between px-2 bg-panel-bg/80 backdrop-blur text-panel-fg relative after:absolute after:bottom-0 after:left-8 after:right-0 after:h-px after:bg-panel-border">
    <div class="flex items-center gap-2">
      <span class="inline-flex h-4 w-4 items-center justify-center rounded bg-panel-border text-[10px]">◇</span>
      <MenuBar />
    </div>
    <div class="flex items-center gap-2">
      <button
        data-tauri-drag-region="no-drag"
        @dblclick.stop
        :class="[
          'h-7 w-7 inline-flex items-center justify-center rounded-md border transition-colors',
          showMainPane
            ? 'border-indigo-300 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'
            : 'border-panel-border bg-panel-bg hover:bg-subtle-bg text-panel-fg'
        ]"
        :title="t('app.toggle_main')"
        @click="$emit('toggleMain')"
      >
        <span v-html="getProductIcon('panelLeft', 'h-4 w-4')"></span>
      </button>
      <button
        data-tauri-drag-region="no-drag"
        @dblclick.stop
        :class="[
          'h-7 w-7 inline-flex items-center justify-center rounded-md border transition-colors',
          showBottomPane
            ? 'border-indigo-300 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'
            : 'border-panel-border bg-panel-bg hover:bg-subtle-bg text-panel-fg'
        ]"
        :title="t('app.toggle_bottom')"
        @click="$emit('toggleBottom')"
      >
        <Icon icon="codicon:layout-panel" width="16" height="16" />
      </button>
      <button
        data-tauri-drag-region="no-drag"
        @dblclick.stop
        :class="[
          'h-7 w-7 inline-flex items-center justify-center rounded-md border transition-colors',
          showAiPane
            ? 'border-indigo-300 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'
            : 'border-panel-border bg-panel-bg hover:bg-subtle-bg text-panel-fg'
        ]"
        :title="t('app.toggle_ai')"
        @click="$emit('toggleAi')"
      >
        <span v-html="getProductIcon('sidebar', 'h-4 w-4')"></span>
      </button>
      <button
        data-tauri-drag-region="no-drag"
        @dblclick.stop
        class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-panel-border bg-panel-bg text-panel-fg hover:bg-subtle-bg"
        :title="t('app.settings')"
        @click="$emit('openSettings')"
      >
        <Icon icon="codicon:gear" width="16" height="16" />
      </button>
      <!-- Format (prettier) -->
      <button
        data-tauri-drag-region="no-drag"
        @dblclick.stop
        class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-panel-border bg-panel-bg text-panel-fg hover:bg-subtle-bg"
        title="Format"
        @click="$emit && $emit('formatActive')"
      >
        <Icon icon="codicon:wand" width="16" height="16" />
      </button>
      <WindowControls />
    </div>
  </header>
</template>


